<template>
  <input type="text"
   class="ipt" 
   :value="value" 
   @input="handleInput"
   :class="{
       success:state === 'success',
       error: state ==='error'
   }"
   @blur="blurFn"
   >
</template>

<script>
export default {
    props: {
        value:String,
        rules:RegExp,
        msg:{
            type:String,
            default:'输入的数据不合法',
        }
    },
    data () {
        return {
            state:"",

        }
    },
    methods: {
        handleInput(e){
            // console.log(e.target.value);
            this.$emit('input',e.target.value)
        },
        blurFn(e) {
            const str = e.target.value.trim();
            // 正则对象.test（字符串） 可以用来校验数据
            if(this.rules.test(str)){
                console.log(this.rules,str,'检验通过');
                this.state = 'success';
            }
            else{
                 this.$notify({type: 'warning', message: this.msg,duration:1000 })
                 this.state = 'error';
            }

        }
    }
}
</script>

<style lang="less" scoped>
    .ipt{
        width: 318px;
        height: 48px;
        border: none;
        outline: none;
        font-size: 20px;
        margin: 20px auto;
        border-bottom: 2px solid #ccc;
        display: block;
        background-color: #f2f3f325;

    }
    .success{
          border-bottom-color: green;
    }
    .error{
        border-bottom-color: red;
        color: red;
    }
</style>